<template>
  <div>
    <vxe-modal
      :title="$t('common.action.detail', '详情')"
      v-model="show"
      :loading="loading"
      :mask="false"
      :lock-view="false"
      width="800px"
      height="580px"
      destroy-on-close
      show-zoom
      remember
      resize
      show-footer
      show-confirm-button
    >
      <!-- 主体部分：详情展示 -->
      <el-descriptions
        ref="description"
        :column="1"
        :border="true"
        label-width="120"
      >
        <!-- id -->
        <el-descriptions-item
          label-class-name="desc-label-width"
          :label="$t('common.field.id', '编号')"
          label-width="100"
        >
          {{ formData.id || '-' }}
        </el-descriptions-item>

        <!-- label -->
        <el-descriptions-item :label="$t('menu.dev.prop.field.label', '名称')">
          {{ formData.label }}
        </el-descriptions-item>

        <!-- value -->
        <el-descriptions-item :label="$t('menu.dev.prop.field.value', '标识')">
          {{ formData.value }}
        </el-descriptions-item>

        <!-- type -->
        <el-descriptions-item :label="$t('menu.dev.prop.field.type', '类型')">
          {{ formData.type }}
        </el-descriptions-item>

        <!-- for_template -->
        <el-descriptions-item
          :label="$t('menu.dev.prop.field.for_template', '页面模板')"
          v-if="formData.for_template"
        >
          <ra-dict-label v-model="formData.for_template" code="sys_template" />
        </el-descriptions-item>

        <!-- for_admin -->
        <el-descriptions-item
          :label="$t('menu.dev.prop.field.for_admin', '后端适用')"
          v-if="formData.for_admin"
        >
          <ra-dict-label
            v-model="formData.for_admin"
            code="yes_or_not_options"
          />
        </el-descriptions-item>

        <!-- for_api -->
        <el-descriptions-item
          :label="$t('menu.dev.prop.field.for_api', 'API适用')"
          v-if="formData.for_api"
        >
          <ra-dict-label v-model="formData.for_api" code="yes_or_not_options" />
        </el-descriptions-item>

        <el-descriptions-item
          :label="$t('menu.dev.prop.field.config', '配置')"
          v-if="formData.config"
        >
          <pre>{{ JSON.stringify(formData.config, null, 2) }}</pre>
        </el-descriptions-item>

        <!-- 备注 -->
        <el-descriptions-item :label="$t('common.field.remark', '备注')">
          {{ formData.remark ? formData.remark : '-' }}
        </el-descriptions-item>

        <!-- status -->
        <el-descriptions-item :label="$t('common.field.status', '状态')">
          <ra-dict-label v-model="formData.status" code="status_options" />
        </el-descriptions-item>

        <!-- sort -->
        <el-descriptions-item :label="$t('common.field.sort', '排序')">
          {{ formData.sort }}
        </el-descriptions-item>

        <!-- 创建时间和更新时间（如果有的话） -->
        <el-descriptions-item
          :label="$t('common.field.create_time', '创建时间')"
          v-if="formData.create_time"
        >
          {{ formData.create_time }}
        </el-descriptions-item>

        <el-descriptions-item
          :label="$t('common.field.update_time', '更新时间')"
          v-if="formData.update_time"
        >
          {{ formData.update_time }}
        </el-descriptions-item>

        <!-- 结束 -->
      </el-descriptions>

      <!-- 空状态提示 -->
      <el-empty
        v-if="!loading && !formData.id"
        :description="$t('common.message.info.empty', '暂无数据')"
        :image-size="100"
      />
    </vxe-modal>
  </div>
</template>

<script setup>
import { smartTranslate as $t, transPlaceholder as $p } from '@/lang';

defineOptions({
  name: 'PropDetail',
  inheritAttrs: false,
});

// Props定义
const props = defineProps({
  api: {
    type: Object,
    required: true,
    validator: (value) => {
      return typeof value.detail === 'function';
    },
  },
  options: {
    type: Object,
    default: () => ({}),
  },
});

const loading = ref(false);
const show = ref(false);

const initialFormData = {
  id: null,
  label: '',
  value: '',
  type: null,
  config: '',
  for_template: null,
  for_admin: null,
  for_api: null,
  remark: null,
  status: null,
  sort: null,
  create_time: null,
  update_time: null,
};

const formData = reactive({ ...initialFormData });

const resetFormData = () => {
  Object.assign(formData, initialFormData);
};

const loadDetailData = async (id) => {
  if (!id) {
    return;
  }

  try {
    loading.value = true;
    const params = { id };
    const { data } = await props.api.detail(params);

    if (data) {
      Object.assign(formData, data);
    } else {
      ElMessage.warning($t('common.message.info.not_found', '未找到相关数据'));
      resetFormData();
    }
  } catch (error) {
    console.error('Error loading detail data:', error);
    ElMessage.error($t('common.message.info.load_failed', '载入失败'));
    resetFormData();
  } finally {
    loading.value = false;
  }
};

defineExpose({
  show(id) {
    if (id) {
      show.value = true;
      resetFormData();
      loadDetailData(id);
    } else {
      console.warn($t('common.message.info.no_selected', '未选择任何数据'));
      ElMessage.warning(
        $t('common.message.info.no_selected', '未选择任何数据'),
      );
    }
  },
});
</script>

<style lang="scss" scoped>
.desc-label-width {
  width: 100px;
}

.table-list-image {
  width: 50px;
  height: 50px;
  object-fit: cover;
  border-radius: 4px;
}

.content-text {
  max-height: 200px;
  overflow-y: auto;
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.5;
}

:deep(.el-descriptions__label) {
  font-weight: 600;
  color: #606266;
}

:deep(.el-descriptions__content) {
  color: #303133;
}

:deep(.el-loading-mask) {
  border-radius: 4px;
}
</style>
